function chinese(startIndex,size) {
    $.ajax({
        url:'/user/type',
        type:'get',
        dataType:'json',
        data:{startIndex:startIndex,size:size,str:'华语'},
        success:function (res) {

            console.log(res);
            //定义表单内容
            let str=``;
            let list=res.data.records;
            console.log(list);
            for (let i=0;i<list.length;i++){
                console.log(list[i].headerImg);
                str+=`
                        <tr>  
                          <td>${(res.data.current-1)*20+i+1}</td>
                          <td>${list[i].songName}</td>
                          <td>${list[i].singerName}</td>
                        </tr>
                     `;
            }

            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="chinese(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='chinese('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='chinese('+(res.data.current+1)+','+size+')';
            }
            $('#box').html(`
    
      <div class="row" style="margin: 0px ;">
        <div class="col-3">
          <!-- 这是一个用来填充布局的盒子 -->
        </div>
        <div class="col-3 ran">
          <h4>类型</h4>
          <ul class="rank">
            <a href="sleep_ranking_b.html">
              <li style="background-color: #A9E2F3;"><img src="img/chinese.png">华语</li>
            </a>
          </ul>
        </div>
        <div class="col-9 ran1">
          <div class="rank2" style="width: 200px; display: inline-block;">
            <img src="img/chinese.png" style="width: 160px">
          </div>
          <div class="rank2_1" style="display: inline-block;">
            <h4>华语</h4>
            <p class="ff_x">
              <button type="button" class="btn btn-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" class="bi bi-caret-right-square" viewBox="0 0 16 16">
                  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                  <path d="M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z" />
                </svg><a href="/user/playType/华语">播放</a></button>
            </p>
          </div>
          <hr>
          <div class="row text-center fy" style="margin: 0px;">
            <table class="table-striped table-hover" border="1px" style="width: 100%; ">
              <thead class="bg-info">
                <tr>
                  <th class="col-2">排行</th>
                  <th class="col-5">歌名</th>
                  <th class="col-5">歌手</th>
                </tr>
              </thead>
              <tbody>
              ${str}
              </tbody>
            </table>
              <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    ${pages}
                    <li class="page-item" onclick="${after}">
                      <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
              </nav>
          </div>
        </div>
        <!-- 这是一个回到顶部的小盒子 -->
        <div class="top_t">
          <a href="#">TOP</a>
        </div>
      </div>
    `)
        }
    })
}
function fashion(startIndex,size) {
    $.ajax({
        url:'/user/type',
        type:'get',
        dataType:'json',
        data:{startIndex:startIndex,size:size,str:'流行'},
        success:function (res) {

            console.log(res);
            //定义表单内容
            let str=``;
            let list=res.data.records;
            console.log(list);
            for (let i=0;i<list.length;i++){
                console.log(list[i].headerImg);
                str+=`
                        <tr>  
                          <td>${(res.data.current-1)*20+i+1}</td>
                          <td>${list[i].songName}</td>
                          <td>${list[i].singerName}</td>
                        </tr>
                     `;
            }

            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="fashion(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='fashion('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='fashion('+(res.data.current+1)+','+size+')';
            }
            $('#box').html(`
    
      <div class="row" style="margin: 0px ;">
        <div class="col-3">
          <!-- 这是一个用来填充布局的盒子 -->
        </div>
        <div class="col-3 ran">
          <h4>类型</h4>
          <ul class="rank">
            <a href="sleep_ranking_b.html">
              <li style="background-color: #A9E2F3;"><img src="img/fashion.jpg">流行</li>
            </a>
          </ul>
        </div>
        <div class="col-9 ran1">
          <div class="rank2" style="width: 200px; display: inline-block;">
            <img src="img/fashion.jpg" style="width: 160px;height: 160px">
          </div>
          <div class="rank2_1" style="display: inline-block;">
            <h4>流行</h4>
            <p class="ff_x">
              <button type="button" class="btn btn-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" class="bi bi-caret-right-square" viewBox="0 0 16 16">
                  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                  <path d="M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z" />
                </svg><a href="/user/playType/流行">播放</a></button>
            </p>
          </div>
          <hr>
          <div class="row text-center fy" style="margin: 0px;">
            <table class="table-striped table-hover" border="1px" style="width: 100%; ">
              <thead class="bg-info">
                <tr>
                  <th class="col-2">排行</th>
                  <th class="col-5">歌名</th>
                  <th class="col-5">歌手</th>
                </tr>
              </thead>
              <tbody>
              ${str}
              </tbody>
            </table>
              <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    ${pages}
                    <li class="page-item" onclick="${after}">
                      <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
              </nav>
          </div>
        </div>
        <!-- 这是一个回到顶部的小盒子 -->
        <div class="top_t">
          <a href="#">TOP</a>
        </div>
      </div>
    `)
        }
    })
}
function rock(startIndex,size) {
    $.ajax({
        url:'/user/type',
        type:'get',
        dataType:'json',
        data:{startIndex:startIndex,size:size,str:'摇滚'},
        success:function (res) {

            console.log(res);
            //定义表单内容
            let str=``;
            let list=res.data.records;
            console.log(list);
            for (let i=0;i<list.length;i++){
                console.log(list[i].headerImg);
                str+=`
                        <tr>  
                          <td>${(res.data.current-1)*20+i+1}</td>
                          <td>${list[i].songName}</td>
                          <td>${list[i].singerName}</td>
                        </tr>
                     `;
            }

            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="rock(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='rock('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='rock('+(res.data.current+1)+','+size+')';
            }
            $('#box').html(`
    
      <div class="row" style="margin: 0px ;">
        <div class="col-3">
          <!-- 这是一个用来填充布局的盒子 -->
        </div>
        <div class="col-3 ran">
          <h4>类型</h4>
          <ul class="rank">
            <a href="sleep_ranking_b.html">
              <li style="background-color: #A9E2F3;"><img src="img/rock.jpeg">流行</li>
            </a>
          </ul>
        </div>
        <div class="col-9 ran1">
          <div class="rank2" style="width: 200px; display: inline-block;">
            <img src="img/rock.jpeg" style="width: 160px;height: 160px">
          </div>
          <div class="rank2_1" style="display: inline-block;">
            <h4>摇滚</h4>
            <p class="ff_x">
              <button type="button" class="btn btn-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" class="bi bi-caret-right-square" viewBox="0 0 16 16">
                  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                  <path d="M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z" />
                </svg><a href="/user/playType/摇滚">播放</a></button>
            </p>
          </div>
          <hr>
          <div class="row text-center fy" style="margin: 0px;">
            <table class="table-striped table-hover" border="1px" style="width: 100%; ">
              <thead class="bg-info">
                <tr>
                  <th class="col-2">排行</th>
                  <th class="col-5">歌名</th>
                  <th class="col-5">歌手</th>
                </tr>
              </thead>
              <tbody>
              ${str}
              </tbody>
            </table>
              <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    ${pages}
                    <li class="page-item" onclick="${after}">
                      <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
              </nav>
          </div>
        </div>
        <!-- 这是一个回到顶部的小盒子 -->
        <div class="top_t">
          <a href="#">TOP</a>
        </div>
      </div>
    `)
        }
    })
}
function ballad(startIndex,size) {
    $.ajax({
        url:'/user/type',
        type:'get',
        dataType:'json',
        data:{startIndex:startIndex,size:size,str:'民谣'},
        success:function (res) {

            console.log(res);
            //定义表单内容
            let str=``;
            let list=res.data.records;
            console.log(list);
            for (let i=0;i<list.length;i++){
                console.log(list[i].headerImg);
                str+=`
                        <tr>  
                          <td>${(res.data.current-1)*20+i+1}</td>
                          <td>${list[i].songName}</td>
                          <td>${list[i].singerName}</td>
                        </tr>
                     `;
            }

            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="ballad(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='ballad('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='ballad('+(res.data.current+1)+','+size+')';
            }
            $('#box').html(`
    
      <div class="row" style="margin: 0px ;">
        <div class="col-3">
          <!-- 这是一个用来填充布局的盒子 -->
        </div>
        <div class="col-3 ran">
          <h4>类型</h4>
          <ul class="rank">
            <a href="sleep_ranking_b.html">
              <li style="background-color: #A9E2F3;"><img src="img/ballad.jpeg">民谣</li>
            </a>
          </ul>
        </div>
        <div class="col-9 ran1">
          <div class="rank2" style="width: 200px; display: inline-block;">
            <img src="img/ballad.jpeg" style="width: 160px;height: 160px">
          </div>
          <div class="rank2_1" style="display: inline-block;">
            <h4>民谣</h4>
            <p class="ff_x">
              <button type="button" class="btn btn-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" class="bi bi-caret-right-square" viewBox="0 0 16 16">
                  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                  <path d="M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z" />
                </svg><a href="/user/playType/民谣">播放</a></button>
            </p>
          </div>
          <hr>
          <div class="row text-center fy" style="margin: 0px;">
            <table class="table-striped table-hover" border="1px" style="width: 100%; ">
              <thead class="bg-info">
                <tr>
                  <th class="col-2">排行</th>
                  <th class="col-5">歌名</th>
                  <th class="col-5">歌手</th>
                </tr>
              </thead>
              <tbody>
              ${str}
              </tbody>
            </table>
              <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    ${pages}
                    <li class="page-item" onclick="${after}">
                      <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
              </nav>
          </div>
        </div>
        <!-- 这是一个回到顶部的小盒子 -->
        <div class="top_t">
          <a href="#">TOP</a>
        </div>
      </div>
    `)
        }
    })
}
function electronic(startIndex,size) {
    $.ajax({
        url:'/user/type',
        type:'get',
        dataType:'json',
        data:{startIndex:startIndex,size:size,str:'电子'},
        success:function (res) {

            console.log(res);
            //定义表单内容
            let str=``;
            let list=res.data.records;
            console.log(list);
            for (let i=0;i<list.length;i++){
                console.log(list[i].headerImg);
                str+=`
                        <tr>  
                          <td>${(res.data.current-1)*20+i+1}</td>
                          <td>${list[i].songName}</td>
                          <td>${list[i].singerName}</td>
                        </tr>
                     `;
            }

            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="electronic(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='electronic('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='electronic('+(res.data.current+1)+','+size+')';
            }
            $('#box').html(`
    
      <div class="row" style="margin: 0px ;">
        <div class="col-3">
          <!-- 这是一个用来填充布局的盒子 -->
        </div>
        <div class="col-3 ran">
          <h4>类型</h4>
          <ul class="rank">
            <a href="sleep_ranking_b.html">
              <li style="background-color: #A9E2F3;"><img src="img/electronic.jpeg">电子</li>
            </a>
          </ul>
        </div>
        <div class="col-9 ran1">
          <div class="rank2" style="width: 200px; display: inline-block;">
            <img src="img/electronic.jpeg" style="width: 160px;height: 160px">
          </div>
          <div class="rank2_1" style="display: inline-block;">
            <h4>电子</h4>
            <p class="ff_x">
              <button type="button" class="btn btn-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" class="bi bi-caret-right-square" viewBox="0 0 16 16">
                  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                  <path d="M5.795 12.456A.5.5 0 0 1 5.5 12V4a.5.5 0 0 1 .832-.374l4.5 4a.5.5 0 0 1 0 .748l-4.5 4a.5.5 0 0 1-.537.082z" />
                </svg><a href="/user/playType/电子">播放</a></button>
            </p>
          </div>
          <hr>
          <div class="row text-center fy" style="margin: 0px;">
            <table class="table-striped table-hover" border="1px" style="width: 100%; ">
              <thead class="bg-info">
                <tr>
                  <th class="col-2">排行</th>
                  <th class="col-5">歌名</th>
                  <th class="col-5">歌手</th>
                </tr>
              </thead>
              <tbody>
              ${str}
              </tbody>
            </table>
              <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    ${pages}
                    <li class="page-item" onclick="${after}">
                      <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
              </nav>
          </div>
        </div>
        <!-- 这是一个回到顶部的小盒子 -->
        <div class="top_t">
          <a href="#">TOP</a>
        </div>
      </div>
    `)
        }
    })
}